<template>
  <div class="header">
    <div class="logo" @click="toindex">
      <img :src="logoImg" alt="" />
      {{ logoName }}
    </div>
    <ul class="nav">
      <li v-for="(item, index) in nav" :key="index">
        <router-link
          :to="{ path: item.url }"
          :class="bule == index ? 'bule' : ''"
          @click.native="nav_change(index)"
        >
          {{ item.name }}
        </router-link>
        <ul>
          <li v-for="(items, inx) in item.children" :key="inx">
            <router-link :to="items.url" @click.native="nav_son_change(inx)">{{ items.name }}</router-link>
          </li>
        </ul>
      </li>
    </ul>
    <div class="login">
      <el-avatar :size="50" :src="circleUrl"></el-avatar>
      <span :style="cookie == 0 ?'display:none':''">登录</span>
      <ul>
        <li v-for="(items, inx) in deng" :key="inx">
          <router-link :to="items.url">{{ items.name }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      route: [],
      bule: 0,
      cookie:0,
      logoImg: require("../assets/logo2.png"),
      logoName: "山东柏瑞软件科技有限公司",
      nav: [
        {
          url: "/index",
          name: "首页",
        },
        {
          url:"/History",
          name: "历年考卷",
        },
        {
          url: "/Course",
          name: "课程推荐",
        },
        {
          url: "/Random",
          name: "训练中心",
          children: [
            {
              url: "/Random",
              name: "随机组卷",
            },
            {
              url: "/Special",
              name: "专项训练",
            },
            {
              url: "/Practice",
              name: "模拟考试",
            },
          ],
        },
        {
          url: "/Message",
          name: "个人中心",
        },
      ],
      circleUrl: require("../assets/tx_2.png"),
      deng: [
        { 
          url: "/change",
          name: "修改密码",
        },
        {
          url: "/Message",
          name: "个人中心",
        },
      ],
    };
  },
  // watch: {
  //   $route(to) {
  //     this.toback(to.path);
  //   },
  // },
  created() {
    this.bule = localStorage.getItem("get");
  },
  methods: {
    nav_change(index){
      // this.$router.push({path:this.nav[index].url})
      this.bule = index
      console.log(this.bule)
      localStorage.setItem("get",this.bule)
    },
    nav_son_change(){
    //  this.$router.push({path:this.nav[3].children[inx].url}) 
     this.bule = 3
      localStorage.setItem("get",this.bule)
    },
    toindex() {
      this.$router.push("index");
     this.bule = 0
      localStorage.setItem("get",this.bule)
    },
  },
  
};
</script>
<style lang="scss" scoped>
.display {
  display: none;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #000;
}

.bule {
  border-bottom: 6px solid #0096f6;
}
.header {
  width: 100%;
  margin: 0 auto;
  z-index: 123457980;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 110px;
  line-height: 110px;
  box-shadow: 0px 20px 20px -15px rgba(116, 116, 116, 0.35);
  .logo {
    width: 32%;
    // background: #f00;
    font-size: 27px;
    img {
      width: 67px;
      height: 79px;
      vertical-align: middle;
      padding-right: 12px;
    }
  }
  .nav {
    width: 40%;
    //background: #f00;
    display: flex;
    justify-content: space-between;
    font-size: 24px;
    padding: 14px 0px;
    text-align: center;
    > li {
      width: 18%;
      // height: 100%;
      position: relative;
      a {
        color: #666;
        width: 100%;
        height: 70%;
        display: block;
      }
      ul {
        display: none;
        width: 100%;
        background: rgba($color: #fff, $alpha: 0.7);
        position: absolute;
        top: 97%;
        left: 0%;
        z-index: 12345;
        li {
          line-height: 50px;
          border-bottom: 1px solid #fff;
          font-size: 24px;
        }
        li:last-child {
          border: none;
        }
      }
    }
    > li:hover {
      ul {
        display: block;
      }
    }
  }
  .login {
    width: 8%;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    position: relative;
    span {
      margin-right: 17px;
    }
    ul {
      display: none;
      width: 100%;
      background: rgba($color: #fff, $alpha: 0.7);
      position: absolute;
      top: 97%;
      left: 0%;
      z-index: 12345;
      li {
        line-height: 50px;
        border-bottom: 1px solid #fff;
        font-size: 18px;
        text-align: center;
      }
      li:last-child {
        border: none;
      }
    }
  }
  .login:hover ul {
    display: block;
  }
}
</style>